<template>
  <div class="list_cell">
    <div
      v-for="(item, i) in list"
      :key="i"
      :class="{
        list_cell_item: true,
        item_underLine: i !== list.length - 1
      }"
    >
      <div class="item_left">
        <Uni-Icon v-if="i < 3" class="item_badge" :name="pmPic[i + 1]" size="48" />
        {{ i + 1 }}
      </div>
      <div class="item_center">
        <div class="item_title">
          {{ item.CENTERPRISENAME1 }}
        </div>
        <div class="item_value">
          <span style="margin-right: 5px;">执行率</span>
          <span style="color: #F3A065;">{{ item.ZXL }}</span>
        </div>
      </div>
      <Uni-Icon name="arrow-right" color="#B6B9BF" size="32" />
    </div>
  </div>
</template>

<script>
import UniIcon from 'uview-ui/components/u-icon/u-icon';
export default {
  components: {
    UniIcon
  },

  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      pmPic: {
        1: require('@/static/img/summaryAnalysis/pm1.png'),
        2: require('@/static/img/summaryAnalysis/pm2.png'),
        3: require('@/static/img/summaryAnalysis/pm3.png')
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.list_cell {
  background-color: #fff;
  .list_cell_item {
    display: flex;
    color: #B6B9BF;
    // justify-content: space-between;
    padding: 12px;
    align-items: center;
    position: relative;

    .item_left {
      margin: 0 15px;
      text-align: right;
      position: relative;

      .item_badge {
        position: absolute;
        top: -15px;
        left: -20px;
      }
    }

    .item_center {
      flex: 1;

      .item_title {
        color: #303133;
        font-size: 16px;
      }

      .item_value {
        font-size: 14px;

      }
    }

    &.item_underLine {
      &::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 0;
        height: 1px;
        background-color: #EBEDF0;
      }
    }
  }
}

</style>
